<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">班级说说</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="<%= where=='index'?'active':''%>"><a href="#">全部说说 <span class="sr-only">(current)</span></a></li>
        <li><a href="#">我的说说</a></li>
        <li class="<%= where=='chat'?'active':''%>"><a href="chat">聊天室</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <% if(userInf.login){ %>
          <p class="navbar-right"  style="color:#fff;line-height:50px;margin:0"><img style="height:30px;width:30px;border-radius:50%" src="" id="zhaopian" alt=""></p>
          <p class="navbar-right username" data-name="<%= userInf.username%>" style="color:#fff;line-height:50px;margin:0;margin-right:10px;">欢迎：<%= userInf.username%></p>
      <% }else{%>
        <ul class="nav navbar-nav navbar-right">
          <li class="<%= where=='login'?'active':''%>"><a href="/login">登录</a></li>
          <li class="<%= where=='sigin'?'active':''%>"><a href="/sigin">注册</a></li>
        </ul>
        <% } %>
    </div><!--/.navbar-collapse -->

  </div>
</nav>
<div class="imgupload container" style="display:none;margin-top:50px;height:150px;border-radius:0 0 5px 5px;background:#ddd">
  <form action= "" method= "post" enctype="multipart/form-data" id="upload">
    <div class="form-group text-center">
      <div class="inp" style="width:100%;height:50px;position:relative;margin-top:20px;">
          <input type="file" id="exampleInputFile" name="files" style="display:inline-block;width:100%;height:100%;position:absolute;z-index:10;left:0;top:0;opacity:0;cursor: pointer">
          <span style="font-size:30px;color:#3e8f3e">请上传你的照片，谢谢配合</span>
      </div>
    </div>
    <input type="button" value="Submit" class="btn btn-success btn-lg btn-block" id="submit">
  </form> 
</div>
<script src="https://cdn.bootcss.com/jquery/2.1.2/jquery.js"></script>
<script type="text/javascript">
  if(<%= where=='login'||where=='sigin'%>){
    $("#zhaopian").attr("src",'./images/meng.jpg');
  }else{
    if(localStorage.getItem("imgHead")){
      $("#zhaopian").attr("src",localStorage.getItem("imgHead"));
    }else{
      $("#zhaopian").attr("src",'./images/meng.jpg');
    };
    if(<%=userInf.login%>&&localStorage.getItem("imgHead")){
      $(".imgupload").animate({"height":0},1000).css('display','none')
    }else{
      $(".imgupload").animate({"height":"150px"},1000).css('display','block')
    };
  }
  function upLoad(){
    var formData = new FormData($("#upload")[0]);
    $.ajax({
      url:'/upload',
      type:"post",
      data:formData,
      processData:false,
      contentType:false,
      success:function(res){
        if(res.status==1){
          $("#zhaopian").attr("src",res.data);
          localStorage.setItem('imgHead',res.data);
          $(".imgupload").hide(300);
        }
      }
    })
  };
  $("#submit").click(function(){
    upLoad()
  });
</script>
